<template>
  <div class="future-weather">
    <div>
      <h3>最后更新时间：{{ updateTime }}</h3>
    </div>
    <div class="chart-container" ref="chartContainer"></div>
  </div>
</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
//import { init } from 'echarts';
import dayjs from "dayjs"
import{KEY,API_24H}from"../common/constrant";
echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);

//var chartDom = document.getElementById('main');
//var myChart = echarts.init(chartDom);
//var option;


export default {
  data(){
    return{
      hourly:[],
      hourWeatherData:{
        fxTime:[],//x轴数据
        temp:[],//series数据
      },
      updateTime:""
    };
  },
  //  computed: mapState([
  //   'location'
  // ]),
  computed:{
    location:function() {
      return this.$store.state.location.id
    },
  //   ...mapState([
  //       "location"
  //   ])
  },
 methods:{
  //获取初始API数据
  getData(){
    axios
    .get(API_24H,{
      params:{
        // location:"101270101",
        location:this.location,
        key:KEY,
      },
    })
    .then((res) => {
      console.log(res.data);
      this.hourly = res.data.hourly;
      this.updateTime = dayjs(res.data.updateTime).format("YYYY-MM-DD HH:mm:ss")
      // 初始化时间和温度两个数组
      this.hourWeatherData.fxTime = []
      this.hourWeatherData.temp = []
      //遍历24小时天气数据，分别取出数据中的部分数据
      this.hourly.forEach(element => {
        this.hourWeatherData.fxTime.push(element.fxTime)
        this.hourWeatherData.temp.push(element.temp)
      });
      //需要处理fxTime这个数组，把数组中的每个值都通过格式化，只显示HH
      // let fxTimeHH = []
      //1.这是传统的方法
      // this.hourWeatherData.fxTime.forEach(element => {
      //   fxTimeHH.push(dayjs(element).format("HH"))
      // });
      // console.log("----------"+fxTimeHH)
      //调用初始化图表方法
      // this.initChart(fxTimeHH,this.hourWeatherData.fxTime,this.hourWeatherData.temp)

      //3.最简便的写法，直接在函数参数中对fxTime数组调用map方法进行元素的处理，把map方法的返回值作为函数的参数
      this.initChart(
        this.hourWeatherData.fxTime.map((element) => dayjs(element).format("HH")
      ),
      this.hourWeatherData.temp
     );
    });
  },
  
  //初始化图表，有两个参数：x坐标的内容和图标值（y坐标）
  initChart(xAxisData,seriesData){
    //此种方式是通过js的dom获取网页元素，但是vue中不能这么使用 
    //var charDom = document.getElementByID("main");
    //这是vue中获取网页元素的方式:ref
    var chartDom = this.$refs.chartContainer;
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      xAxis:{
        type:"category",
        data:xAxisData,
      },
      yAxis:{
        type:"value",
      },
      series:[
        {
          data:seriesData,
          type:"line",
        },
      ],
    };
    option && myChart.setOption(option);

  },
 },
 mounted(){
  this.getData();
 },
 watch:{
    location:function(){
      this.getData();
    }
 }
};
</script>

 <!-- Add "scoped" attribute to limit CSS to this component only  -->
 <style scoped> 
  .chart-container{
  height: 20rem;
}  
 </style> 